<template>
  <el-container>
    <el-header>
      <div id="header">
        <el-menu :default-active="'/' +this.$route.path.split('/')[1]" :router="true" class="oj-menu" mode="horizontal"
                 @select="handleSelect"
        >
          <div class="logo">图云教育</div>
          <el-menu-item index="/welcome" class="el-icon-s-home"> 首页</el-menu-item>
          <el-menu-item index="/search" class="el-icon-search"> 图云搜索</el-menu-item>
          <el-menu-item index="/md" class="el-icon-document"> 笔记编写</el-menu-item>
          <el-menu-item index="/class" class="el-icon-trophy"> 课程商城</el-menu-item>
          <el-submenu index="/about">
            <template slot="title">
              <i class="el-icon-warning-outline"></i>
              <span>关于</span>
            </template>
            <el-menu-item index="/judger">Judger</el-menu-item>
          </el-submenu>
          <div class="btn-menu" style="float: right;margin-right: 20px;margin-top: 10px">
            <el-popover placement="bottom" transition="fade-in-linear" title="" width="200" trigger="hover" content="">
              <span>登录后你可以:</span>
              <br><br>
              <div class="fa fa-pencil" aria-hidden="true"></div>
              <span>刷题</span>
              <div class="el-icon-trophy" style="position: relative;left: 80px">
                <span>比赛</span>
              </div>
              <br><br>
              <!-- LoginForm -->
              <template>
                <a class="login-btn" @click="loginDialogFormVisible = true">Login</a>
                <el-dialog title="登录" style="margin-top: 5%" @close="loginDialogReset('formLogin')" :visible.sync="loginDialogFormVisible" :append-to-body="true" :modal="true" width="30%" close-on-press-escape :destroy-on-close="true" center>

                  <!-- 使用手机密码登陆 -->
                  <template v-if="loginType === 1">
                    <div style="text-align: center" class="yxinmiracle-header">
                      <i :class="loginTitleItems[0].iconText"></i>
                      &nbsp;
                      <span v-text="loginTitleItems[0].title" class="login-title-style"></span>
                    </div>
                    <el-form :model="formLogin" :rules="ruleLogin" ref="formLogin">
                      <div style="width: 90%;margin-left: 5%">
                        <el-form-item label=""
                                      :width=0
                                      prop="phone">
                          <el-input placeholder="请输入手机号码"
                                    v-model="formLogin.phone"
                                    autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label=""
                                      :width=0
                                      prop="password">
                          <el-input placeholder="请输入密码"
                                    v-model="formLogin.password"
                                    show-password></el-input>
                        </el-form-item>
                      </div>
                      <div style="text-align: center;margin-top: 60px">
                        <a class="a-tag-style" href="">忘了密码？ </a>
                        <span>&nbsp;|&nbsp;</span>
                        <router-link class="a-tag-style" to="/register"> 注册新账号</router-link>
                        <span>&nbsp;|&nbsp;</span>
                        <a class="a-tag-style" href=""> 意见反馈 </a>
                        <el-divider><span style="color: #a2aab2;font-size: 12px">其他方式登录</span></el-divider>
                        <div>
                          <button class="login-other-item--btn login-other-item--mobile"
                                  @click="loginType===1?loginType=0:loginType=1"></button>
                          <p class="login-other-item--name">手机验证码登录</p>
                        </div>
                      </div>
                    </el-form>
                  </template>


                  <template v-else>
                    <div style="text-align: center" class="yxinmiracle-header">
                      <i :class="loginTitleItems[1].iconText"></i>
                      &nbsp;
                      <span v-text="loginTitleItems[1].title" class="login-title-style"></span>
                    </div>
                    <el-form :model="formLogin" :rules="ruleLogin" ref="formLogin">
                      <div style="width: 90%;margin-left: 5%">
                        <el-form-item label="" :label-width=0 prop="phone">
                          <el-select v-model="value" placeholder="请选择" style="width: 20%">
                            <el-option v-for="item in cities" :key="item.value" :label="item.value" :value="item.value">
                              <span style="float: left">{{ item.label }}</span>
                              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                            </el-option>
                          </el-select>
                          <el-input placeholder="请输入手机号" v-model="formLogin.phone" style="width: 80%"></el-input>
                        </el-form-item>
                        <el-form-item label="" :label-width=0 prop="code">
                          <el-input placeholder="请输入验证码" v-model="formLogin.code" style="width: 70%"></el-input>
                          <template v-if="isTimeOut === 0">
                            <el-button style="width: 30%" @click="setTime(60)" v-text="loginPhoneCodeMsg"></el-button>
                          </template>
                          <template v-else>
                            <el-button style="width: 30%" v-text="loginPhoneCodeMsg"></el-button>
                          </template>
                        </el-form-item>
                      </div>
                      <div style="text-align: center;margin-top: 60px">
                        <a class="a-tag-style" href="">忘了密码？ </a><span>&nbsp;|&nbsp;</span>
                        <router-link class="a-tag-style" to="/register"> 注册新账号</router-link>
                        <span>&nbsp;|&nbsp;</span>
                        <a class="a-tag-style" href=""> 意见反馈 </a>
                        <el-divider><span style="color: #a2aab2;font-size: 12px">其他方式登录</span></el-divider>
                        <div>
                          <button class="login-other-item--btn login-other-item--mobile"
                                  @click="loginType===0?loginType=1:loginType=0"></button>
                          <p class="login-other-item--name">手机密码登录</p>
                        </div>
                      </div>
                    </el-form>
                  </template>


                  <div slot="footer" class="dialog-footer">
                    <el-button @click="onResetCourseForm()">清 除</el-button>
                    <!--                    handleLogin()-->
                    <el-button type="primary" @click="handleLogin" :loading=btnLoginLoading>确 定</el-button>
                    <Modal
                      width="auto"
                      v-model="showCaptcha"
                      class-name="vertical-center-modal"
                    :transfer="false"
                    :footer-hide="true">
                      <div class="slider">
                        <div class="content">
                          <div class="bg-img-div">
                            <img id="bg-img" src="" alt/>
                          </div>
                          <div class="slider-img-div">
                            <img id="slider-img" src="" alt/>
                          </div>
                        </div>
                        <div class="slider-move">
                          <div class="slider-move-track">
                            拖动滑块完成拼图
                          </div>
                          <div class="slider-move-btn" @mousedown="moveBtnMouseDown" @touchstart="moveTouchStart()"></div>
                        </div>
                        <div class="bottom">
                          <div class="close-btn"></div>
                          <div class="refresh-btn" @click="this.refreshCaptcha"></div>
                        </div>
                      </div>
                    </Modal>
                  </div>


                </el-dialog>
              </template>
              <!-- RegisterForm -->
              <el-button slot="reference" @click="loginDialogFormVisible = true">登录</el-button>
            </el-popover>
          </div>
        </el-menu>
      </div>
    </el-header>
    <el-main>
      <router-view></router-view>
    </el-main>
    <el-footer>
      <div>
        <!-- 底部 -->
        <footer class="footer">
          <div class="social">
            <div>
              <span class="iconfont icon-a-youxiangdianziyouxiang"></span>
              <span class="iconfont icon-github"></span>
              <span class="iconfont icon-weixin">
<!--                <img src="https://yxinmiracle.gitee.io/yxinmiracle-blog/assets/qr_code.png" alt="" class="profile-qr">-->
              </span>
            </div>
          </div>
          <div class="copyright">
            <span id="hexo-power">
              <b>Powered by &nbsp;</b>
              <a href="https://gitee.com/yxinmiracle" class="yxinmiraclecc" target="_blank"><b>YxinMiracle&nbsp;</b></a>
            </span>
            <span class="el-icon-lollipop"></span>
            <span id="theme-info">
              <a class="yxinmiraclecc" href="" target="_blank"><b>图云教育</b></a>
            </span>
          </div>
          <div class="website-approve">
                <span id="icp-approve" class="icp-approve">
                    <a class="yxinmiraclecc" href="https://beian.miit.gov.cn/" target="_blank">粤ICP备2021016064号</a>
                </span>
            <img class="beian-img" src="https://yxinmiracle.gitee.io/yxinmiracle-blog/assets/beian.png">
            <span id="beian-approve" class="beian-approve">
                    <a class="yxinmiraclecc"
                       href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=2021016064" target="_blank">京公网安备 2021016064号</a>
                </span>
          </div>
        </footer>
      </div>
    </el-footer>
    <el-backtop></el-backtop>
    <!--    <div ></div>-->
  </el-container>
</template>

<script>
  import $ from 'jquery'
  import { login, getCaptcha,checkChaptcha } from '@/api/userApi'
  import { USER_KEY } from '@/constants/user'

  let start = 0;
  let startY = 0;
  let currentCaptchaId = null;
  let movePercent = 0;
  const bgImgWidth = $(".bg-img-div").width();
  let end = 206;
  let startSlidingTime;
  let entSlidingTime;
  const trackArr = [];

  export default {
    data () {
      // 此处自定义校验手机号码js逻辑
      const usernameReg = /^[a-zA-Z0-9_-]{4,16}$/
      const CheckRequiredUsername = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('用户名不能为空!!'))
        }
        if (!usernameReg.test(value)) {
          return callback(new Error('格式有误'))
        } else {
          return callback()
        }
      }
      return {
        showCaptcha: false,
        activeIndex: '/',
        inputUsername: '',
        inputPassword: '',
        loginType: 1,
        isTimeOut: 0,
        loginPhoneCodeMsg: '点击获取验证码',
        loginTitleItems: [
          {
            id: 1,
            title: '手机密码登录',
            iconText: 'el-icon-key'
          },
          {
            id: 2,
            title: '手机验证码登录',
            iconText: 'el-icon-mobile-phone'
          }
        ],
        loginDialogFormVisible: false,
        registerDialogFormVisible: false,
        btnLoginLoading: false,
        formLogin: {
          phone: '',
          password: '',
          code: ''
        },
        ruleLogin: {
          phone: [
            {
              required: true,
              trigger: 'blur',
              message: '请输入手机号'
            },
            {
              validator: CheckRequiredUsername,
              trigger: 'blur'
            }
          ],
          password: [
            {
              required: true,
              message: '请输入6-20位的密码',
              trigger: 'blur',
              min: 6,
              max: 20
            }
          ],
          code: [
            {
              required: true,
              trigger: 'blur',
              message: '请输入4位的验证码',
              min: 4,
              max: 4
            }
          ]
        },
        formLabelWidth: '70px',
        cities: [{
          value: '+86',
          label: '中国大陆'
        }, {
          value: '+852',
          label: '中国香港'
        }, {
          value: '+853',
          label: '中国澳门'
        }, {
          value: '+886',
          label: '中国台湾'
        }, {
          value: '+335',
          label: '阿尔巴尼亚'
        }, {
          value: '+1',
          label: '美国'
        }],
        value: '+86'
      }
    },
    methods: {
      loginDialogReset (formName) {
        this.$refs[formName].resetFields()
      },
      handleSelect (key, keyPath) {
        console.log(key, keyPath)
      },
      async userLogin(){
        const data = await login(this.formLogin)
        const res = data.data
        if (data.code === 200) {
          this.$notify({
            title: '登陆成功',
            message: data.errorMessage,
            type: 'success'
          })
          this.loginDialogFormVisible = false
          localStorage.setItem(USER_KEY, res.token)
        } else {
          this.$notify.error({
            title: '错误',
            message: data.errorMessage
          })
        }
      },
      async handleLogin () {
        this.$refs.formLogin.validate(async (valid) => {
          if (valid) {
            this.showCaptcha = true
          }
        })
      },
      onResetCourseForm () {
        this.$refs.formLogin.resetFields()
      },
      setTime (val) {
        const that = this
        that.isTimeOut = 1
        if (val !== 0) {
          that.loginPhoneCodeMsg = val + 's后可重新发送'
          val--
          setTimeout(function () {
            that.setTime(val)
          }, 1000)
        } else {
          that.isTimeOut = 0
          that.loginPhoneCodeMsg = '点击获取验证码'
          return
        }
      },
      valid() {
        let data = {
          bgImageWidth: $(".bg-img-div").width(),
          bgImageHeight: $(".slider-img-div").height(),
          sliderImageWidth: $(".slider-img-div").width(),
          sliderImageHeight: $(".slider-img-div").height(),
          startSlidingTime: startSlidingTime,
          entSlidingTime: entSlidingTime,
          trackList: trackArr
        };
        checkChaptcha(currentCaptchaId,data).then(response=>{
          if (response.code === 200){
            if (response.data) {
              this.showCaptcha = false
              this.reset()
              this.userLogin()
            } else {
              this.refreshCaptcha()
            }
          }
        })
      },
      up(event) {
        entSlidingTime = new Date();
        console.log(currentCaptchaId, movePercent, bgImgWidth);
        window.removeEventListener("mousemove", this.move);
        window.removeEventListener("mouseup", this.up);
        this.valid();
      },
      move(event) {
        if (event instanceof TouchEvent) {
          event = event.touches[0];
        }
        let moveX = event.pageX - start;
        let pageX = event.pageX;
        let pageY = event.pageY;
        console.log("x:", pageX, "y:", pageY, "time:" ,new Date().getTime() - startSlidingTime.getTime());
        trackArr.push({x: pageX - start, y:pageY - startY, t: (new Date().getTime() - startSlidingTime.getTime())});
        if (moveX < 0) {
          moveX = 0;
        } else if (moveX > end) {
          moveX = end;
        }
        // if (moveX > 0 && moveX <= end) {
        $(".slider-move-btn").css("transform", "translate(" + moveX + "px, 0px)")
        $(".slider-img-div").css("transform", "translate(" + moveX + "px, 0px)")
        // }
        movePercent = moveX / bgImgWidth;
      },
      reset() {
        $(".slider-move-btn").css("background-position", "-5px 11.79625%")
        $(".slider-move-btn").css("transform", "translate(0px, 0px)")
        $(".slider-img-div").css("transform", "translate(0px, 0px)")
        start = 0;
        startSlidingTime = null;
        entSlidingTime = null;
        trackArr.length = 0;
        movePercent = 0;
        currentCaptchaId = null;
        startY = 0;
      },
      refreshCaptcha() {
        getCaptcha().then(response=>{
          if (response.code === 200){
            let res = response.data
            this.reset();
            currentCaptchaId = res.id;
            $("#bg-img").attr("src", res.captcha.backgroundImage);
            $("#slider-img").attr("src", res.captcha.sliderImage);
          }
        })
      },
      moveBtnMouseDown(){
        console.log("bb")
        startSlidingTime = new Date();
        start = event.pageX;
        startY = event.pageY;
        $(".slider-move-btn").css("background-position", "-5px 31.0092%")
        window.addEventListener("mousemove", this.move);
        window.addEventListener("mouseup", this.up);
      },
      moveTouchStart(){
        startSlidingTime = new Date();
        start = event.pageX;
        startY = event.pageY;
        if (start === undefined) {
          start = event.originalEvent.targetTouches[0].pageX
          startY = event.originalEvent.targetTouches[0].pageY;
        }
        $(".slider-move-btn").css("background-position", "-5px 31.0092%")
        window.addEventListener("touchmove", this.move);
        window.addEventListener("touchend", this.up);
      }
    },
    created () {
      this.refreshCaptcha()
    }
  }
</script>

import 'animate.css';


<style>
  .slider {
    background-color: #fff;
    width: 278px;
    height: 285px;
    z-index: 999;
    box-sizing: border-box;
    padding: 9px;
    border-radius: 6px;
    box-shadow: 0 0 11px 0 #999999;
  }

  .slider .content {
    width: 100%;
    height: 159px;
    position: relative;
  }

  .bg-img-div {
    width: 100%;
    height: 100%;
    position: absolute;
    transform: translate(0px, 0px);
  }
  .slider-img-div {
    height: 100%;
    position: absolute;
    transform: translate(0px, 0px);
  }

  .bg-img-div img {
    width: 100%;
  }

  .slider-img-div img {
    height: 100%;
  }

  .slider .slider-move {
    height: 60px;
    width: 100%;
    margin: 11px 0;
    position: relative;
  }

  .slider .bottom {
    height: 19px;
    width: 100%;
  }

  .refresh-btn, .close-btn, .slider-move-track, .slider-move-btn {
    background: url(https://static.geetest.com/static/ant/sprite.1.2.4.png) no-repeat;
  }

  .refresh-btn, .close-btn {
    display: inline-block;
  }

  .slider-move .slider-move-track {
    line-height: 38px;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    color: #88949d;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
  }
  .slider {
    user-select: none;
  }

  .slider-move .slider-move-btn {
    transform: translate(0px, 0px);
    background-position: -5px 11.79625%;
    position: absolute;
    top: -12px;
    left: 0;
    width: 66px;
    height: 66px;
  }

  .slider-move-btn:hover, .close-btn:hover, .refresh-btn:hover {
    cursor: pointer
  }

  .bottom .close-btn {
    width: 20px;
    height: 20px;
    background-position: 0 44.86874%;
  }

  .bottom .refresh-btn {
    width: 20px;
    height: 20px;
    background-position: 0 81.38425%;
  }
  .after {
    color: #88949d;
  }
</style>
<style>

  .vertical-center-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15%;
  }

  @-webkit-keyframes rocket-data-v-37d58309 {
    0% {
      background-position: 0 0;
    }
    25% {
      background-position: -150px 0;
    }
    50% {
      background-position: -300px 0;
    }
    75% {
      background-position: -450px 0;
    }
    100% {
      background-position: -600px 0;
    }
  }

  @keyframes rocket-data-v-37d58309 {
    0% {
      background-position: 0 0;
    }
    25% {
      background-position: -150px 0;
    }
    50% {
      background-position: -300px 0;
    }
    75% {
      background-position: -450px 0;
    }
    100% {
      background-position: -600px 0;
    }
  }

  .beian-approve {
    font-family: "Oswald-Regular", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  }

  .beian-img {
    position: relative;
    vertical-align: middle;
    padding: 0 0.2rem 0.3rem 0.2rem;
  }

  .website-approve a {
    color: #777;
  }

  .icp-approve {
    font-family: "Oswald-Regular", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  }

  .website-approve {
    font-size: 14px;
    font-family: "Oswald-Regular", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
    margin: 0rem auto 0.5rem;
    text-align: center;
    color: #777;
  }

  .el-icon-lollipop {
    width: 28px;
  }

  .yxinmiraclecc {
    text-decoration: none;
  }

  @font-face {
    font-family: "iconfont"; /* Project id  */
    src: url('../ttf/iconfont.ttf') format('truetype');
  }

  @font-face {
    font-family: "Oswald-Regular", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif; /* Project id  */
    src: url('../ttf/yxinmiracle.ttf') format('truetype'),
    url('../ttf/font1.woff') format('woff'),
    url('../ttf/font2.woff') format('woff');
  }

  .copyright {
    font-family: "Oswald-Regular", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
    margin: 0.5rem auto;
    text-align: center;
    color: #777;
  }

  .copyright a {
    color: #f75357;
  }

  .iconfont {
    font-family: "iconfont" !important;
    font-size: 2.4rem;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .iconfont:hover:before {
    color: rgb(64, 179, 156) !important;
    cursor: pointer;
  }

  .icon-weixin:before {
    color: #777;
    content: "\e637";
    margin: 0 0.5rem 0 0;
  }

  .icon-github:before {
    color: #777;
    content: "\ea0b";
    margin: 0 0.5rem 0 0;
  }

  .icon-a-youxiangdianziyouxiang:before {
    color: #777;
    content: "\e6fe";
    margin: 0 0.5rem 0 0;
  }

  .footer {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 4rem 0 1.5rem 0;
    margin: 0 auto;
    width: 100%;
  }

  .footer .social {
    width: 50%;
    min-width: 42.8125rem;
    line-height: 2.5rem;
    margin: 0 auto;
    text-align: center;
    vertical-align: text-bottom;
  }

  .profile-qr {
    visibility: hidden;
    position: absolute;
    left: 0;
    bottom: 2.5rem;
    border: 3px solid #fff;
    border-radius: 3px;
    z-index: 99;
    background-color: #fff;
    width: 7rem;
    padding: 0.5rem;
    opacity: 0;
    transition: all 0.1s ease-in 0s;
  }

  @media screen and (max-width: 960px) {
    .logo {
      display: none;
    }
  }

  #header {
    min-width: 300px;
    position: fixed;
    top: 0;
    left: 0;
    height: auto;
    width: 100%;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
  }

  .logo {
    margin-left: 2%;
    margin-right: 2%;
    font-size: 20px;
    float: left;
    line-height: 60px;
  }

  .login-btn {
    display: block;
    box-sizing: border-box;
    height: 40px;
    padding: 10px 0;
    line-height: 20px;
    font-size: 14px;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    background: #00A1D6;
    border-radius: 2px;
    cursor: pointer;
  }

  .register-btn {
    color: #00A1D6;
    position: relative;
    left: 40px;
    cursor: pointer;
  }

  .a-tag-style {
    text-decoration: none;
    color: #666;
  }

  .a-tag-style:hover {
    color: #67B1FE;
  }

  .login-title-style {
    font-size: 20px;
    color: #333;
  }

  .login-other-item--mobile {
    background: url(https://9.idqqimg.com/edu/i-mobile@3_c1e38ac28f8a5e9d78cd284795567591.png) 50% no-repeat;
    background-size: 100%;
  }

  .login-other-item--btn {
    width: 40px;
    height: 40px;
    background-color: transparent;
    border: none;
  }

  .login-other-item--name {
    color: #a0a8b0;
    font-size: 12px;
  }

  .login-other-item--btn:hover {
    cursor: pointer;
  }

  .el-dialog__body {
    padding-bottom: 0 !important;
    padding-top: 20px !important;
  }

  .yxinmiracle-header {
    height: 100px;
    background: transparent url(https://s1.hdslb.com/bfs/static/jinkela/charge/asserts/modal-line.png) no-repeat center 3px;
  }

</style>
